<template>
  <div class="wakeUp" @click="imgShow = !imgShow" v-show="wakeUpShow">
    <img src="@/assets/pic2/左.png" v-show="imgShow" />
    <img src="@/assets/pic2/右.png" v-show="!imgShow" />
  </div>
  <!-- style="display: none" -->
  <transition name="functionListFade">
    <div class="functionList" v-show="!imgShow">
      <!-- 侧边栏开关按钮 -->
      <div
        class="showController"
        @click="
          containerShow = !containerShow;
          imgShow = true;
        "
      >
        <img :src="require('@/assets/pic2/' + imgPath)" title="视图扩展" />
        <div>视图扩展</div>
      </div>
      <!-- 裁剪回滚按钮 -->
      <div class="modelReturn" @click="needReturn">
        <img src="@/assets/pic2/重复.png" />
        <div>地图重载</div>
      </div>
      <!-- 点选楼栋开关按钮 -->
      <div class="clickSelection" @click="clickToBuilding">
        <img :src="require('@/assets/pic2/' + clickIMG + '.png')" />
        <div>点选楼栋</div>
      </div>
      <!-- 旋转视角开关按钮 -->
      <div class="cameraRotation" @click="cameraRotation">
        <img :src="require('@/assets/pic2/' + rotationIMG + '.png')" />
        <div>旋转视角</div>
      </div>
      <!-- 搜索按钮 -->
      <div class="searchButton" @click="searchShowController">
        <img :src="require('@/assets/pic2/' + searchIMG + '.png')" />
        <div>风险预警</div>
      </div>
    </div>
  </transition>
  <!-- 多边形裁剪 -->
  <router-view name="polygon_Cut"></router-view>
  <router-view name="net_Cut"></router-view>
</template> 

<script>
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

/* eslint-disable */
export default {
  name: "title",
  data: () => {
    return {
      wakeUpShow: true,
      imgShow: true,
      containerShow: true,
      imgPath: "扩展.png",
      searchIMG: "筛选",
      clickIMG: "点击",
      polygonCutIMG: "绘制",
      rotationIMG: "视角旋转",
      functionListShow: false,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    let subList = [];

    onMounted(() => {
      hover();
      // 平台标题点击事件
      document.querySelector(".title>p").addEventListener("click", () => {
        proxy.wakeUpShow = true;
        router.push({
          path: "/main",
        });
        pubsub.publish("needCut", true);
        pubsub.publish("needReturn", "@");
      });
      subList.push(
        pubsub.subscribe("clickTipShow", (n, data) => {
          if (data) {
            let node = document.querySelector(".clickSelection");
          }
        }),
        pubsub.subscribe("searchHide", () => {
          searchShowController();
        }),
        pubsub.subscribe("wakeUpShowChange", (n, data) => {
          proxy.wakeUpShow = data;
          if (!data) {
          }
        })
      );
    });

    function hover() {
      setTimeout(() => {
        let nodeList = Array.from(
          document.querySelectorAll(".functionList>div")
        );
        nodeList.forEach((element) => {
          let children = Array.from(element.children);
          element.addEventListener("mousemove", () => {
            children[0].style["display"] = "none";
            children[1].style["display"] = "block";
          });
          element.addEventListener("mouseout", () => {
            children[0].style["display"] = "block";
            children[1].style["display"] = "none";
          });
        });
      }, 500);
    }

    function needReturn() {
      pubsub.publish("needCut", true);
      pubsub.publish("needReturn", "@");
    }

    function searchShowController() {
      router.push({
        path: "riskWarning",
      });
    }

    function clickToBuilding() {
      pubsub.publish("needReturn", "@");
      if (!store.state.clickToBuilding) {
        // proxy.containerShow = false;
        pubsub.publish("clickTipShow", true);
        pubsub.publish("firstPageShowChange", false);
        store.commit("isFromClick", true);
        store.commit("changeClickToBuilding", true);
        ElMessage({
          message: "楼栋点选开启",
          type: "success",
          offset: 50,
          duration: 4000,
        });
      } else {
        needReturn();
        // proxy.containerShow = true;
        store.commit("changeClickToBuilding", false);
        pubsub.publish("clickTipShow", false);
        pubsub.publish("firstPageShowChange", true);
      }
    }

    function polygonCut() {
      pubsub.publish("needReturn", "@");
      if (!store.state.polygonCut) {
        store.commit("changePolygonCut", true);
      } else {
        store.commit("changePolygonCut", false);
        router.push({
          path: "/main",
        });
      }
      proxy.containerShow = !proxy.containerShow;
      pubsub.publish("netCut", proxy.containerShow);
    }

    function cameraRotation() {
      if (!store.state.cameraRotation) {
        pubsub.publish("cameraRotation", "on");
        store.commit("changeCameraRotation", true);
      } else {
        pubsub.publish("cameraRotation", "off");
        store.commit("changeCameraRotation", false);
      }
    }

    return {
      needReturn,
      searchShowController,
      clickToBuilding,
      polygonCut,
      cameraRotation,
      subList,
    };
  },
  watch: {
    containerShow: {
      handler(newvalue, oldvalue, proxy) {
        pubsub.publish("containerShowChange", newvalue);
        pubsub.publish("FirstPageShow", "@");
      },
    },
  },
  beforeRouteLeave(to) {
    this.wakeUpShow = false;
    // console.log(to.path);
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.functionListFade-enter-active {
  transition: all 0.5s ease-out;
}

.functionListFade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(50%);
}

.functionListFade-enter-from,
.functionListFade-leave-to {
  transition: 0.5s;
  transform: translateX(50%);
  opacity: 0;
}
.functionList {
  position: absolute;
  z-index: 99999;
  right: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  > div {
    border: #1296db 2px solid;
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 3px #1296db;
    margin-top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 70%;
    }
    > div {
      display: none;
      width: 70%;
      text-align: center;
      font-weight: bold;
      color: #1296db;
    }
  }
}
.functionList > div:nth-child(2) {
  border: #d81e06 2px solid;
  box-shadow: 0px 0px 10px 3px #d81e06;
  > div {
    color: #d81e06;
  }
}

.functionList > div:nth-child(3) {
  border: #0cd7e2 2px solid;
  box-shadow: 0px 0px 10px 3px #0cd7e2;
  > div {
    color: #0cd7e2;
  }
}

// .functionList > div:nth-child(5) {
//   border: #515151 2px solid;
//   box-shadow: 0px 0px 10px 3px #515151;
//   > div {
//     color: #515151;
//   }
// }

.functionList > div:nth-child(4) {
  border: #d4237a 2px solid;
  box-shadow: 0px 0px 10px 3px #d4237a;
  > div {
    color: #d4237a;
  }
}

.functionList > div:nth-child(5) {
  border: #029032 2px solid;
  box-shadow: 0px 0px 10px 3px #029032;
  > div {
    color: #029032;
  }
}

.wakeUp {
  padding: none;
  outline: none;
  border: none;
  width: 35px;
  height: 458px;
  position: absolute;
  z-index: 999999;
  right: 0.5%;
  top: 50%;
  transform: translate(-0.5%, -50%);
  background-color: transparent;
  border-radius: 50%;
  background-image: ~"url(@{app-images-root}/item_gkqy_title1.png)";
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  > img {
    height: 30px;
    width: 30px;
    margin-left: 15px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: 0.5s;
  }
}

.wakeUp:hover img {
  height: 35px;
  width: 35px;
}
</style>